.top{
    background-color: #111111;
    text-align: center;
    padding-top: 1px;
    box-sizing: border-box;
    padding-bottom: 89px;

    h1{
        font-size: 38px;
        color: #999999;
        margin-top: 200px;

        span{
            color: #fcac45;
            font-weight: bold;
        }
    }
    small{
        color: #999999;
        font-size: 16px;

        span{
            font-weight: bold;
            color: #c3c3c3;
        }
    }
    .top-img{
        margin: auto;
        margin-top: 280px;
    }

}
.list{
    width: 80%;
    padding-top: 108px;
    margin: auto;

    small{
        color: #cbcbcb;
        font-size: 15px;
    }
    .list-text{
        color: #313131;
        font-size: 25px;
        text-transform: uppercase;

        span{
            font-weight: bold;
        }

        &::after{
            content: '';
            border-top: 4px solid #fcac45;
            width: 110px;
            display: block;
            margin-top: 10px;
            margin-bottom: 30px;
        }
    }
    .list-texttwo{
        white-space: pre-line;
        color: #a7a7a7;
        font-size: 14px;
    }
    .nest{
        margin-top: 49px;
        .item{
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            &::before{
                content: '';
                width: 14px;
                height: 14px;
                border: 2px solid #5a5a5a;
                border-radius: 50%;
                display: block;
                margin-right: 11px;
                background: radial-gradient(black 30%, white 30%);
            }
            
            p{
                color: #656565;
                font-size: 14px;

                span{
                    color: #5a5a5a;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
    }
    .btn{
        width: 194px;
        height: 46px;
        border: 2px solid  #898989;
        color: #898989;
        font-size: 10px;
        margin-top: 49px;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 52px;
        margin-bottom: 102px;
        img{
            width: 15px;
            height: 13px;
            margin-right: 5px;
        }
    }
}
.center{
    background-color: #111111;
    margin: auto;
    text-align: center;
    padding-top: 90px;
    
    p{
        font-size: 32px;
        color: white;
        text-transform: uppercase;

        span{
            font-weight: bold;
        }
    }
    .lineone{
        width: 100px;
        height: 5px;
        background: #fcac45;
        margin: auto;
        margin-top: 30px;
    }
    .linetwo{
        width: 67px;
        height: 4px;
        background: #b37b33;
        margin: auto;
        margin-top: 10px;
    }
    .container{
        width: 80%;
        .team-swiper{
            .item{
                margin: auto;
                margin-top: 93px;
                img{
                    width: 130px;
                    border-radius: 50%;
                }
                .jason{
                    font-size: 15px;
                    color: #ffffff;
                    font-weight: bold;
                }
                .knife{
                    font-size: 15px;
                    color: #eeeeee;
                    margin-top: 7px;
                }
                .small{
                    font-size: 14px;
                    color: #eeeeee;
                    margin-top: 36px;
                }
            }
            .team-pagination{
                position: static;
                margin-top: 72px;
                margin-bottom: 80px;
                .swiper-pagination-bullet{
                    background:#fff;
                    border-radius: unset;
                    opacity: unset;
                }
                .swiper-pagination-bullet-active{
                    background: #fcac45;
                }
            }
        }
    }
}
.take{
    margin: auto;
    text-align: center;
    padding-top: 90px;
    
    h1{
        font-size: 32px;
        color: #222222;
        text-transform: uppercase;

        span{
            font-weight: bold;
        }
    }
    .lineone{
        width: 100px;
        height: 5px;
        background: #fcac45;
        margin: auto;
        margin-top: 30px;
    }
    .linetwo{
        width: 67px;
        height: 4px;
        background: #b37b33;
        margin: auto;
        margin-top: 10px;
    }
    .take-text{
        color: #a6a6a6;
        font-size: 12px;
        margin: auto;
        margin-top: 40px;
        width: 80%;
    }
    .take-content{
        width: 80%;
        padding-top: 128px;
        margin: auto;
        .take-img{
            width: 123px;
            height: 123px;
            border: 4px solid #fcac45;
            border-radius: 50%;
            text-align: center;
            line-height: 123px;
            margin: auto;

            img{
                width: 60px;
                height: 60px;
            }
        }
        .desimg{
            font-size: 20px;
            color: #222222;
            margin-top: 30px;
            text-transform: uppercase;
        }
        .first{
            font-size: 12px;
            color: #595959;
            margin-top: 21px;
            margin-bottom: 102px;
        }
    }
}
.some{
    margin: auto;
    background: #111111;
    text-align: center;
    padding-top: 90px;
    
    h1{
        font-size: 32px;
        color: #eeeeee;
        text-transform: uppercase;

        span{
            font-weight: bold;
        }
    }
    .lineone{
        width: 100px;
        height: 5px;
        background: #fcac45;
        margin: auto;
        margin-top: 30px;
    }
    .linetwo{
        width: 67px;
        height: 4px;
        background: #b37b33;
        margin: auto;
        margin-top: 10px;
    }
    .container{
        width: 80%;
        .swiper-slide{
            align-items: center;
            margin-top: 98px;
            font-size: 27px;
            color: #b6b6b6;
            text-transform: uppercase;

            span{
                font-weight: bold;
            }
        }
        .team-pagination{
            position: static;
            margin-top: 72px;
            margin-bottom: 80px;
            .swiper-pagination-bullet{
                background:#fff;
                border-radius: unset;
                opacity: unset;
            }
            .swiper-pagination-bullet-active{
                background: #fcac45;
            }
        }
    }
}
.limited{
    background: #eeeeee;
    padding-top: 90px;
    
    h1{
        font-size: 32px;
        color: #222;
        text-transform: uppercase;
        text-align: center;

        span{
            font-weight: bold;
        }
    }
    .lineone{
        width: 100px;
        height: 5px;
        background: #fcac45;
        margin: auto;
        margin-top: 30px;
    }
    .linetwo{
        width: 67px;
        height: 4px;
        background: #b37b33;
        margin: auto;
        margin-top: 10px;
    }
    .lorem{
        color: #a6a6a6;
        font-size: 13px;
        margin: auto;
        margin-top: 40px;
        width: 80%;
    }
    .filter{
        width: 80%;
        margin: auto;
        .menu{
            margin-top: 115px;
            display: flex;
            justify-content: space-between;
            .title{
                font-size: 15px;
                color: #222;
                text-transform: uppercase;
            }
            .menu-nav a{
                padding: 0 15px;
                text-transform: uppercase;
                color: #6c6c6c;
                border-right: 1px solid #6c6c6c;

                &:last-child{
                    border-right: none;
                }
                &:hover{
                    color: #000;
                }
            }
            .mobile-nav{
                display: none;
            }
        }
        .trend{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item{
                margin-top: 30px;
                position: relative;
                width: 230px;
                height: 218px;

                .content{
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: #222;
                    width: 100%;
                    height: 95%;
                    text-align: center;
                    padding-top: 67px;
                    transition: all .8s linear;
                    opacity: 0;
                    .textone{
                        font-size: 15px;
                        color: white;
                        text-transform: uppercase;
                    }
                    .texttwo{
                        color: #7c7c7c;
                        font-size: 12px;
                    }
                    .yuan{
                        width: 40px;
                        height: 40px;
                        border: 2px solid #fcac45;
                        border-radius: 50%;
                        margin: auto;
                        margin-top: 27px;

                        span{
                            color: #fcac45;
                            font-size: 30px;
                            line-height: 40px;
                        }
                    }
                }
                &:hover .content{
                    opacity: 1;
                }
            }
        }
    }
}
.dean{
    margin: auto;
    background: #111111;
    text-align: center;
    padding-top: 90px;
    
    h1{
        font-size: 33px;
        color: #e8e8e8;

        span{
            font-weight: bold;
        }
    }
    .lineone{
        width: 100px;
        height: 5px;
        background: #fcac45;
        margin: auto;
        margin-top: 30px;
    }
    .linetwo{
        width: 67px;
        height: 4px;
        background: #b37b33;
        margin: auto;
        margin-top: 10px;
    }
    .container{
        width: 80%;
        .swiper-slide{
            .text{
                align-items: center;
                margin-top: 98px;
                font-size: 15px;
                color: #b6b6b6;
                text-transform: uppercase;

                span{
                    font-weight: bold;
                }
            }

            p{
                font-size: 15px;
                color: #b2b2b2;
                margin-top: 50px;
        
                span{
                    font-weight: bold;
                }
            }
        }
        .team-pagination{
            position: static;
            margin-top: 72px;
            margin-bottom: 80px;
            .swiper-pagination-bullet{
                background:#fff;
                border-radius: unset;
                opacity: unset;
            }
            .swiper-pagination-bullet-active{
                background: #fcac45;
            }
        }
    }
}
.bottom{
    background: #eeeeee;
    padding-top: 90px;
    
    h1{
        font-size: 32px;
        color: #222;
        text-transform: uppercase;
        text-align: center;

        span{
            font-weight: bold;
        }
    }
    .lineone{
        width: 100px;
        height: 5px;
        background: #fcac45;
        margin: auto;
        margin-top: 30px;
    }
    .linetwo{
        width: 67px;
        height: 4px;
        background: #fdc57c;
        margin: auto;
        margin-top: 10px;
    }
    .take-text{
        color: #a6a6a6;
        font-size: 15px;
        margin-top: 40px;
        white-space: pre;
        text-align: center;
        margin-left: -70px;
    }
    .box{
        width: 60%;
        margin: 0 auto;
        form{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item{
                width: 45%;
            }

            .textarea{
                width: 100%;
                height: 168px;
                margin-bottom: 40px;
                & > textarea.form-control{
                    height: 100%;
                }
            }
            label{
                span{
                    color: red;
                }
            }
            .form-group:last-child{
                margin-left: auto;
                
            }

            button{
                width: 165px;
            }
        }
    }
}
footer{
    width: 100%;
    height: 90px;
    background: #000;
    line-height: 90px;

    .foot{
        width: 80%;
        margin: 0 auto;
        .foot-text{
            color: #a9a9a9;
            font-size: 10px;
            float: left;
    
            span{
                color: #b2b2b2;
                font-weight: bold;
            }
        }
        .foot-img{
            float: right;

            img{
                margin-right: 12px;
            }
        }
    }
}

@media screen and (max-width:768px) {
    
}

@media  screen and (max-width:400px) {
    .top{
        h1{
            margin-top: 100px;
            font-size: 28px;
        }
        .top-img{
            margin-top: 160px;
        }
    }
    .center{
        .container{
            .team-swiper{
                .item{
                    display: flex;
                    text-align: left;
                    margin-top: 40px;
                    img{
                        border-radius: unset;
                        margin-right: 15px;
                    }
                    .small{
                        font-size: 12px;
                        margin-top: 20px;
                    }
                }
            }
        }
    }
    .take{
        .take-text{
            overflow-y: scroll;
            height: 80px;
        }
        .take-content{
            padding-top: 30px;
            text-align: left;
            .take-img{
                border-radius: unset;
                float: left;
                margin-right: 15px;
            }
            .first{
                margin-bottom: 20px;
            }
        }
    }
    .some{
        h1{
            font-size: 25px;
        }
        .container{
            .swiper-slide{
                font-size: 20px;
            }
        }
    }
    .limited{
        h1{
            font-size: 25px;
        }
        .lorem{
            overflow-y: scroll;
            height: 80px;
        }
        .filter{
            .menu-nav{
                display: none;
            }
            .mobile-nav{
                display: block;
            }
        }
    }
    .dean{
        h1{
            font-size: 25px;
        }
        .container{
            .text{
                font-size: 12px;
            }
        }
    }
    .bottom{
        h1{
            font-size: 25px;
        }
        .take-text{
            white-space: unset;
           width: 80%;
           margin: auto;
           overflow-y: scroll;
           height: 80px;
           margin-top: 20px;
        }
        .box{
            width: 80%;
            margin-top: 30px;
            form{
                .item{
                    width: 100%;
                }

            }
        }
    }
    footer{
        padding-bottom: 100px;
        height: 50px;
        line-height: 50px;
        .foot{
            .foot-text{
                font-size: 15px;
            }
        }
    }
}